<template>
  <div class="ele-carousel">
    <el-carousel :interval="4000" height="400px">
      <el-carousel-item v-for="carousel in props.imgList" :key="carousel.banner_id">
        <a :title="carousel.banner_title"><img :src="carousel.banner_cover" /></a>
        <!-- <img :src="carousel.banner_cover" /> -->
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import type { IBannersItem } from "./type"

interface ICarouselInfo {
  imgList: IBannersItem[]
}

const props = withDefaults(defineProps<ICarouselInfo>(), {})
</script>

<style lang="less" scoped>
.ele-carousel {
  .el-carousel__item {
    // border-radius: 14px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }

    a {
    }
  }
}
</style>
